/* pages/mv/index.wxss */
.container {
  .playVideo {
    width: 100%;
    height: 420rpx;
    position: fixed;
    top: 0;
    z-index: 100;

    video {
      width: 100%;
      height: 100%;
    }
  }

  .info-wrap {
    padding: 20rpx 15rpx;
    padding-top: 420rpx;

    .mv-info {
      padding: 20rpx 0;

      .title {
        font-size: 35rpx;
      }

      .group {
        color: #bebebe;
        padding: 5rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
    }

    .singer-info {
      display: flex;
      align-items: center;

      .avatar-wrap {
        flex: 2;

        image {
          width: 79%;
          height: 72rpx;
          border-radius: 50%;
        }
      }

      .name {
        flex: 14;
        font-size: 31rpx;
      }
    }
  }

  .recommend {
    padding: 0rpx 15rpx;

    .mvs {
      .item {
        display: flex;
        height: 150rpx;
        padding: 10rpx 0;

        .img-wrap {
          flex: 3;
          color: #ffffff;
          font-size: 26rpx;

          image {
            width: 90%;
            height: 100%;
          }

          ;

          .num-wrap {
            display: flex;
            justify-content: flex-end;
            position: relative;
            top: -133rpx;
            left: -42rpx;
          }

          .time {
            display: flex;
            justify-content: flex-end;
            position: relative;
            top: 61rpx;
            left: -42rpx;
          }
        }

        .info-detail {
          flex: 5;
        }
      }
    }
  }

  .comment-wrap {
    padding: 0rpx 15rpx;

    .title {
      padding: 15rpx 0;
    }

    .comments-wrap {
      .item {
        display: flex;
        padding: 8rpx 0;
        justify-content: center;
        // align-items: center;

        .icon-wrap {
          flex: 1;
          width: 90rpx;
          height: 80rpx;

          image {
            width: 100%;
            height: 100%;
            border-radius: 50%;
          }
        }

        .content-wrap {
          flex: 8;
          border-bottom: 2rpx solid #e6e6e6;
          padding-bottom: 15rpx;
          padding-left: 15rpx;

          .content {
            .topC {
              display: flex;
              align-items: center;

              .nameDate {
                flex: 5;

                .name {
                  color: #696969;
                  font-size: 28rpx;
                }

                .date {
                  padding-top: 10rpx;
                  padding-bottom: 25rpx;
                  font-size: 19rpx;
                  color: #c9c4c4;
                }
              }

              .likedCount {
                flex: 1;
                font-size: 20rpx;
                display: flex;
                justify-content: center;
                align-items: center;
                text {
                  padding-right: 14rpx;
                  padding-top: 15rpx;
                }
              }
            }


            .comment {}
          }
        }
      }

      .lookAll {
        padding: 20rpx 0;
        color: blue;
      }
    }
  }

  .comment-wraview {
    padding: 0rpx 15rpx;

    .title {
      padding: 15rpx 0;
    }

    .comments-wraview {

      .item {
        display: flex;
        padding: 8rpx 0;
        justify-content: center;
        // align-items: center;

        .icon-wraview {
          flex: 1;
          width: 90rpx;
          height: 80rpx;

          image {
            width: 100%;
            height: 100%;
            border-radius: 50%;
          }
        }

        .content-wraview {
          flex: 8;
          border-bottom: 2rpx solid #e6e6e6;
          padding-bottom: 15rpx;
          padding-left: 15rpx;

          .content {
            .topC {
              display: flex;
              align-items: center;

              .nameDate {
                flex: 5;

                .name {
                  color: #696969;
                  font-size: 28rpx;
                }

                .date {
                  padding-top: 10rpx;
                  padding-bottom: 25rpx;
                  font-size: 19rpx;
                  color: #c9c4c4;
                }
              }

              .likedCount {
                flex: 1;
                font-size: 20rpx;
                display: flex;
                justify-content: center;
                align-items: center;
                text {
                  padding-right: 14rpx;
                  padding-top: 15rpx;
                }
              }
            }

            .comment {}
          }
        }
      }

      .lookAll {
        padding: 20rpx 0;
        color: blue;
      }
    }
  }

}